import React, { useState } from 'react'
import PropTypes from 'prop-types'
import style from './DetailInfo.module.less'
import CaseNo from './CaseNo'
import ProgressBar from './ProgressBar'
import PartyBlock from './PartyBlock'
import InfoBlock from './InfoBlock'
import Claim from './Claim'
import Note from './Note'

function Main ({ caseDetail, fullInfo, refreshFn }) {
  const [isAll, setIsAll] = useState(false)
  return (
    <div className={style.container}>
      <CaseNo fullInfo={fullInfo} />
      <Note caseDetail={caseDetail} refreshFn={refreshFn} />
      <ProgressBar caseDetail={caseDetail} />
      <PartyBlock caseDetail={caseDetail} />
      <InfoBlock isAll={isAll} caseDetail={caseDetail} />
      <Claim isAll={isAll} caseDetail={caseDetail} />
      <div className={style['toggle-btn']}>
        <button onClick={() => setIsAll(!isAll)}>{isAll ? '隐藏' : '显示全部'}</button>
      </div>
    </div>
  )
}

Main.propTypes = {
  fullInfo: PropTypes.func,
  caseDetail: PropTypes.object
}

Main.defaultProps = {
  fullInfo: () => {},
  caseDetail: null
}

export default Main
